<template>
	<div>
		<h1>评论</h1>
		<div v-for="el in arr">
			<img :src="url+el.userimg" alt=""><span>{{el.nickname}}</span>
			<p>{{el.content1}}</p>
		</div>
		<hr>
		<el-input type="text" v-model="comment_content"></el-input>
		<button @click="commentbtnclick">提交</button>
	</div>
</template>

<script setup>
	import {
		getCurrentInstance,
		ref,
		onMounted,
		reactive
	} from "vue"
	let {
		proxy: {
			axios,
			url
		}
	} = getCurrentInstance()
	let obj = defineProps(["goodsid"])
	let arr = reactive([])
	let loadcomments=async () => {
		let res = await axios.get("/api/getcomments", {
			params: {
				id: obj.goodsid
			}
		})
		console.log(res)
		arr.splice(0,arr.length)
		res.data.map(el => arr.push(el))
	}
	onMounted(loadcomments)


	let comment_content = ref("")
	let commentbtnclick = async () => {
		let res = await axios.get("/api/setcomments", {
			params: {
				id: obj.goodsid,
				content1: comment_content.value
			}
		})
		console.log(res)
		if(res.data.code==4004){
			alert(res.data.info)
		}
		else if(res.data.code==2006){
			loadcomments()
		}
	}
</script>

<style scoped>
	img{
		width: 30px;
		height: 30px;
	}
</style>